<template>
  <Layout>
    <Breadcrumb v-show="class_list_id == undefined" :style="{margin: '10px 0'}">
      <BreadcrumbItem>文件管理</BreadcrumbItem>
      <BreadcrumbItem>上传文件</BreadcrumbItem>
    </Breadcrumb>
    <Card :bordered="false">
      <Upload
        multiple
        :on-success="handleSuccess"
        :on-remove="handleRemove"
        :on-format-error="handleFormatError"
        type="drag"
        name="up_file"
        :action="CD_.qj_url + 'index/Fileup/setWrite'">
        <div style="padding: 20px 0">
          <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
          <p>点击此处或者将文件拖入即可选择文件</p>
        </div>
      </Upload>
      <!--:default-file-list="uploadList"-->
      <!--:before-upload="handleBeforeUpload"-->

    </Card>
    <div class="demo-spin-article"  style="position: relative;margin-top: 15px">
      <Card :bordered="false">
        <div slot="title">
          <Row>
            <i-col class="item_text"  :xs="12" :sm="12" :md="6" :lg="6"><strong>文件编号:</strong>{{formItem.file_number}}</i-col>
            <i-col class="item_text"  :xs="12" :sm="12" :md="6" :lg="6"><strong>文件类型:</strong>{{formItem.file_class}}</i-col>
            <i-col class="item_text"  :xs="24" :sm="24" :md="12" :lg="12"
                   style="display: block;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;"><strong>文件地址:</strong>{{formItem.file_src}}</i-col>
          </Row>
        </div>
        <Form ref="formItem" :model="formItem" :rules="ruleValidate" :label-width="70">


          <FormItem
            v-for="(item, index) in formItem.file_name"
            :key="index"
            :label="'文件名 ' + (index+1)">
            <Input type="text" v-model="formItem.file_name[index]" placeholder="请输入文件名称"></Input>
          </FormItem>
          <FormItem label="文件分类" >
            <Cascader v-model="formItem.class_list_id" :data="class_data" change-on-select filterable @on-change="change_class" placeholder="请选择分类"></Cascader>
          </FormItem>
          <FormItem label="备注" prop="description">
            <Input v-model.trim="formItem.description" type="textarea" :rows="4" placeholder="备注" />
          </FormItem>
          <FormItem label="用户信息" >
            <Alert type="success">
              <Row>
                <i-col class="item_text"  :xs="12" :sm="12" :md="6" :lg="6"><strong>上传人姓名:</strong>{{formItem.user_name}}</i-col>
                <i-col class="item_text"  :xs="12" :sm="12" :md="6" :lg="6"><strong>上传人电话:</strong>{{formItem.user_mobile}}</i-col>
                <i-col class="item_text"  :xs="12" :sm="12" :md="6" :lg="6"><strong>所属角色:</strong>{{formItem.user_role}}</i-col>
                <i-col class="item_text"  :xs="12" :sm="12" :md="6" :lg="6"><strong>所属项目:</strong>{{formItem.user_department}}</i-col>
              </Row>
            </Alert>
          </FormItem>

          <FormItem>
            <Button type="primary" :loading="isLoading" @click="add_file('formItem')">确认提交</Button>
          </FormItem>
        </Form>
      </Card>

      <Spin fix  v-if="spinShow">请先选择需要上传的文件,文件上传完成后需要转换格式，文件越大耗时越长，请耐心等待...</Spin>
    </div>

  </Layout>
</template>

<script>

    export default {
        name: 'SetFile',
        props: ['class_list_id','class_name'],
        data() {
            return {
              spinShow: true,
              file: null,
              isLoading: false,//提交数据时按钮的loading效果
              uploadList: [],
              formItem: {
                id: '',
                file_number: '',
                file_name: [],
                file_src: '',
                file_class: '',
                class_id: '',
                class_list_id: [],
                class_title: '',
//                role_dow: [], //可下载角色
//                department_dow: [], //可下载项目
//                role_view: [], //可查看角色
//                department_view: [], //可查看项目
                user_id: '',
                user_name: '',
                user_mobile: '',
                user_role: '',
                user_department: '',
                description: '',
                state: 'Enable'
              },
              name_list:[],
              file_class_list:[],
              file_src_list:[],
//              role_list:[],// 角色数组
//              department_list:[],// 项目数组
              class_data: [{
                value: 'beijing',
                label: '北京',
                children: [
                  {
                    value: 'gugong',
                    label: '故宫'
                  },
                  {
                    value: 'tiantan',
                    label: '天坛'
                  },
                  {
                    value: 'wangfujing',
                    label: '王府井'
                  }
                ]
              }],//分类
              ruleValidate: {
//                file_name: [
//                  {required: true, message: '请输入文件名称', trigger: 'blur'},
//                ]
              },
            }
        },
        methods: {
          handleBeforeUpload () {
            const check = this.uploadList.length < 1;
            if (!check) {
              this.$Notice.warning({
                title: '上传提示',
                desc:'已选择上传的文件，要重新上传请删除原来的文件.',
                duration:10
              });
            }
            return check;
          },
          handleFormatError (file) {
            this.$Notice.warning({
              title: '上传失败',
              desc: '当前上传文件人数过多，服务器内存不足，请稍后重试.'
            });
          },
          handleRemove (file) {
            const fileList = this.uploadList;
            this.uploadList.splice(fileList.indexOf(file), 1);
            //删除文件

            const index_list = this.file_src_list.indexOf(file.response.file_src) ;

            this.file_class_list.splice(index_list, 1) ;
            this.file_src_list.splice(index_list, 1) ;
            this.formItem.file_class = this.file_class_list.join(',') ;
            this.formItem.file_src =this.file_src_list.join(',') ;

            if(file.response.file_src != undefined){
              this.$http({
                method: 'post',
                url: this.CD_.qj_url + 'index/Fileup/remove_file',
                data: {
                  url: file.response.file_src,
                }
              }).then(function (res) {
                var json = res.data
                if (json.status) {
                  this.$Notice.success({title: '成功删除已选文件，可重新选择~~~'});
                } else {
                  this.$Notice.error({title: '删除失败~~'});
                }
                this.isLoading = false;
              }.bind(this)).catch(function (err) {
                this.$Notice.error({title: '文件删除，错误：',desc:'错误：'+ err});
                this.isLoading = false;
              }.bind(this))
            }

          },
          handleSuccess (res, file) {//上传成功
            console.log(this.class_list_id);

            if(this.class_list_id != undefined){
              this.formItem.class_list_id = this.class_list_id ;
              this.formItem.class_id = this.class_list_id[this.class_list_id.length-1] ;
              this.formItem.class_title = this.class_name ;
            }


            this.uploadList.push({
              'name': file.name,
              'url': res.file_src,
              'class': res.file_class
            }) ;

            this.spinShow = false ;
            this.formItem.file_number = res.file_number ;

            this.name_list.push(file.name) ;
            this.file_class_list.push(res.file_class) ;
            this.file_src_list.push(res.file_src) ;


            this.formItem.file_name = this.name_list;
            this.formItem.file_class = this.file_class_list ;
            this.formItem.file_src =this.file_src_list ;

            //上传人信息
            this.formItem.user_id = this.CD_.user_Data.id ;
            this.formItem.user_name = this.CD_.user_Data.username ;
            this.formItem.user_mobile = this.CD_.user_Data.mobile ;
            this.formItem.user_role = this.CD_.user_Data.role ;
            this.formItem.user_department = this.CD_.user_Data.department ;
          },
          change_class(value,selectedData ){
            /*======================================================
            *@author wf_Huang
            *@Time 2018/10/23 17:26
            *=======================================================
            *@function  选择类别
            *=====================================================*/
            if(selectedData.length > 0 ){
              this.formItem.class_id = value[value.length-1] ;
              this.formItem.class_list_id = value ;
              this.formItem.class_title = selectedData[selectedData.length-1].label ;
            }else {
              this.formItem.class_id = '' ;
              this.formItem.class_list_id = [] ;
                this.formItem.class_title = '' ;
            }


          },
          add_file(data){
            /*======================================================
            *@author wf_Huang
            *@Time 2018/10/23 14:00
            *=======================================================
            *@function  添加file
            *=====================================================*/
            this.$refs[data].validate((valid) => {
                if (valid) {
                  this.$http({
                    method: 'post',
                    url: this.CD_.qj_url + 'index/File/add_file',
                    data: {
                      formItem: JSON.stringify(this.formItem),
                    }
                  }).then(function (res) {
                    var json = res.data
                    if (json.status) {
                      this.$Notice.success({title: '上传成功~~~'});

                      //删除已上传内容
                      this.uploadList = [] ;
                      this.formItem.file_number = '' ;
                      this.formItem.file_name = '' ;
                      this.formItem.file_class = '' ;
                      this.formItem.file_src = '' ;
                      this.spinShow = true
                    } else {
                      this.$Notice.error({title: '上传失败~~'});
                    }
                    this.isLoading = false;
                  }.bind(this)).catch(function (err) {
                    this.$Notice.error({title: '上传删除，错误：',desc:'错误：'+ err});
                    this.isLoading = false;
                  }.bind(this))
                }
            })

          },
          getSelsct(){
            /*======================================================
            *@author wf_Huang
            *@Time ] 11:50
            *=======================================================
            *@function 初始化数据
            *=====================================================*/
            this.$http({
              method: 'get',
              url: this.CD_.qj_url + 'index/Treeclass/csh_RDC',
            }).then(function (res) {
              var json = res.data
              if (json.status) {
                this.class_data = json.class_list ;
              } else {
                this.$Notice.error({title: '分类查询，错误：'+res.msg});
              }
              this.isLoading = false;
            }.bind(this)).catch(function (err) {
              this.$Notice.error({title: '分类查询，错误：',desc:'错误：'+ err});
              this.isLoading = false;
            }.bind(this))

          }
        },
        mounted() {

          this.getSelsct() ;
        }
    }
</script>

<style scoped>
  .item_text{
    margin: 10px 0;
  }
  .item_text strong{
    margin-right: 5px;
  }

</style>
